
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>4使用underscore.js</title>
    <!--weui.css仅为快速的做出页面，可删除-->
    <link href="static/weui.css" rel="stylesheet">
    <script src="static/zepto.min.js"></script>

    <!--引入underscore.js-->
    <script src="static/underscore-min.js"></script>
</head>

<body>

<div class="weui-panel weui-panel-access">
    <div class="weui-panel__hd">文章列表</div>
    <div class="weui-panel-bd js-blog-list">

    </div>
</div>

<!--模板-->
<textarea class="js-tmp" style="display:none;">
    <div class="weui-media-box">
        <a href="<%= url %>" class="" target="_blank">
            <h4 class="weui-media-box__title"><%= title %></h4>
        </a>
        <p class="weui-media-box__desc"><%= desc %></p>
    </div>
</textarea>
<!--/模板-->

<script type="text/javascript">
    /*
        Underscore.js(1.8.3) 中文文档 http://www.css88.com/doc/underscore/

        template_.template(templateString, [settings])
        将 JavaScript 模板编译为可以用于页面呈现的函数,
        对于通过JSON数据源生成复杂的HTML并呈现出来的操作非常有用。
        模板函数可以使用 <%= … %>插入变量, 也可以用<% … %>执行任意的 JavaScript 代码。
        如果您希望插入一个值, 并让其进行HTML转义,请使用<%- … %>。
        当你要给模板函数赋值的时候，可以传递一个含有与模板对应属性的data对象 。
        如果您要写一个一次性的, 您可以传对象 data 作为第二个参数给模板 template 来直接呈现,
        这样页面会立即呈现而不是返回一个模板函数。
    */

    $(function(){
        $.ajax({
            url: 'static/blog.json',
            type: 'get',
            dataType: 'json',
            success: function (response) {
                var htmlList = '';
                var data = response.list;

                var htmlTemp = $("textarea.js-tmp").val();

                $.each(data, function(i,el) {
                    //htmlList += htmlTemp.temp(el);
                    //htmlList += laytpl(htmlTemp).render(el);

                    /*可以这样：*/
                    //var compiled = _.template(htmlTemp);
                    //htmlList += compiled(el);

                    /*或者*/
                    htmlList += _.template(htmlTemp)(el);
                });

                $('.js-blog-list').empty().append(htmlList);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                if (textStatus == 'timeout') {
                    alert('请求超时');
                    return false;
                }
                console.log(jqXHR.responseText);
            },
        });
    });
</script>
</body>